<template functional>
  <div class="detail-item">
    <p class="label" :style="{'min-width': props.labelWidth}">{{ props.label }}</p>
    <p v-if="props.value || props.value === 0" class="value">
      {{ props.value || props.value === 0 ? props.value : '-' }}
    </p>
    <slot v-else></slot>
  </div>
</template>

<script>
export default {
  props: ['label', 'value', 'labelWidth']
}
</script>

<style lang="scss" scoped>
.detail-item {
  display: flex;
  width: 100%;
  min-height: 20px;
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.44);

  .label {
    margin-right: 4px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
    text-align: right;
  }

  .value {
    font-size: 14px;
    font-weight: 400;
    color: rgba(96, 98, 102, 1);
  }
}
</style>
